<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />

<link rel="stylesheet" href="../../layui/css/layui.css">
<script src="../../layui/layui.all.js"></script>

<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>

<script>

	$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay,listWeek'
			},
			defaultDate: new Date(),
			defaultView:'agendaWeek', //默认视图
            editable: false,//可以被编辑
            selectable: false,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
            weekNumbers:true,//显示周数
            selectable: false,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
            firstDay: 1,//设置每周第一天，数字int型，默认0（周日）
            timezone: 'local',//时区
			navLinks: true, // can click day/week names to navigate views
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: [
				{
					title: 'All Day Event',
					start: '2019-12-29'
				},
				{
					title: 'Long Event',
					start: '2019-12-29',
					end: '2019-12-31'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2019-12-31T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2019-12-30T16:00:00'
				},
				{
					title: 'Conference',
					start: '2017-05-11',
					end: '2017-05-13'
				},
				{
					title: 'Meeting',
					start: '2017-05-12T10:30:00',
					end: '2017-05-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2017-05-12T12:00:00'
				},
				{
					title: 'Meeting',
					start: '2017-05-12T14:30:00'
				},
				{
					title: 'Happy Hour',
					start: '2017-05-12T17:30:00'
				},
				{
					title: 'Dinner',
					start: '2017-05-12T20:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2017-05-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2019-12-30'
				}
			],
			 eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
                layer.tips(event.title, this);
            },
            eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
                var index = layer.tips();
                layer.close(index);
            },
            
            
              selectAllow : function(clickInfo) {//禁止点击的控制,是否允许点击false不让点击，  将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。
                var start = clickInfo.start.unix();//获取点击的开始时间
                console.log("点击是否允点击");
                //如果大于当前时间就让点击，否则就不让点击，提示
                if(clickInfo.start >= new Date()){
                    return true;
                }
                //不让点击了 提示
                layer.msg("选择时间小于当前时间，不可以点击过去的时间");
                return false;
            },
            select:function(start, end, jsEvent) {  //点击日历上的某个时间触发的函数
                //layer.msg("点击时间控件" + JSON.stringify(jsEvent));
                /*
                执行顺序，先执行selectAllow:判断是否可以点击
                然后执行select:点击了时间空间出发的事件，这两个控件其实感觉在上边的那个里边写逻辑就可以
                如果可以执行的事件，就在上边那个里边直接写，不可以执行的，就直接提示反馈fase，这样就不可以点击了。
                 */
                layer.msg("点击时间控件");
            },
            eventClick: function(eventObj) {//点击日期控件上显示的事件触发的事件
                layer.msg("我点击的是：11" +  eventObj.title );
                console.log("我点击的是",eventObj)
            },
            
		});
		
	});

</script>
<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

</style>
</head>
<body>

	<div id='calendar'></div>

</body>
</html>
